<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构</title>
</head>
<body>
    <script>
        // 解构 可以从数组或对象中提取值并赋值给变量
        // 1. 数组解构
        let [x, y] = [1, 2];
        console.log(`x=${x}, y=${y}`);

        let [, , c] = [10, 20, 30];
        console.log(`c=${c}`);

        // 2. 扩展运算符
        let [a, ...b] = [1, 2, 3, 4, 5, 6, 7];
        console.log("a=", a);
        console.log("b=", b);

        // 3. 默认值
        let [x1 = 10, y1 = 20] = [100];
        console.log(`x1=${x1}, y1=${y1}`);

        // 4. 两数交换
        let x2 = 10;
        let y2 = 20;
        [x2, y2] = [y2, x2];
        console.log(`x2=${x2}, y2=${y2}`);

        // 5. 对象解构
        let boy = {
            name: "老大",
            gender: "男",
            age: 45,
            weight: 60.5,
            web: "https://www.laoda.com"
        };
        let {name, gender, web} = boy;
        console.log("boy name: ", name);
        console.log("boy gender: ", gender);
        console.log("boy web: ", web);


    </script>
</body>
</html>